<template lang="html">
  <div class="index">
    <SearchNav />
    <div class="index-location">
      <Banner />
      <div class="index-content">
        <CrosswiseBanner title="自然景观" />
        <CrosswiseBanner title="人文景观" />
        <CrosswiseBanner title="田园风光" />
      </div>
    </div>
  	<FootNav />
  </div>
</template>

<script>

  import FootNav from '../../components/FootNav.vue'
  import Banner from "../../components/Banner.vue"
  import CrosswiseBanner from "../../components/CrosswiseBanner.vue"
  import SearchNav from "../../components/SearchNav.vue"

  export default {
    name:"Index",
    data(){
      return{

      }
    },
    components:{
    	FootNav,
      SearchNav,
      Banner,
      CrosswiseBanner
    }
  }

</script>

<style lang="css" scoped>
.index-location{
  margin-top: 0.9rem;
}
.index-content {
  padding: 0 0 1.3rem 0;
}
</style>
